* {
	padding: 0;
	margin: 0;
}

ul {
	width: 520px;
	margin: 50px auto;
	/* perspective: 500px; */
}

li {
	position: relative;
	list-style: none;
	float: left;
	margin: 0 5px;
	width: 120px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	transform-style: preserve-3d;
	transition: all .3s;
}

li:hover {
	transform: rotateX(90deg);
}

div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.box1 {
	background-color: pink;
	transform: translateZ(17.5px);
	z-index: 1;
}

.box2 {
	background-color: purple;
	transform: translateY(50%) rotateX(-90deg);
}
